<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>内部报修详情</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/order/orderDetail.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../component/index.js"></script>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>订单详情</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">
        <!--工程师信息-->
        <order-user-info :order-detail="orderDetail"  ></order-user-info>
        <!-- 订单信息-->
        <order-simple-info :order-detail="orderDetail" :show-status="orderDetail.orderEngineerVos.length == 0" ></order-simple-info>
        <!--故障信息-->
        <order-error-history-info :order-detail="orderDetail"></order-error-history-info>

        <div v-show="showBtn">
            <!--银行人员-->
            <div v-show="btnSwitch == 1" class="order-detail-btn-box">
                <div class="xl-btn xl-btn-outline normal no-shadow" @click="cancelOrder">取消订单</div>
                <div class="xl-btn normal no-shadow" @click="goAddServerOrder">转给维护商</div>
            </div>
            <!--网点人员 -->
            <div v-show="btnSwitch == 2" class="xl-btn normal no-shadow" @click="checkOrder">开始检查</div>

            <!--网点人员 -->
            <div v-show="btnSwitch == 3" class="order-detail-btn-box">
                <div class="xl-btn xl-btn-outline normal no-shadow" @click="fixSelfOrder">自行修复</div>
                <div class="xl-btn normal no-shadow"  @click="goAddServerOrder">转给维护商</div>
            </div>
        </div>

    </div>

    <xlb-modal v-model="dialogMod.mod">
        <div slot="header">自行修复</div>
        <div slot="content">
            <div>
                <input v-model="canCelDesc" class="input-no-outer" type="text" placeholder="请填写处理方式">
            </div>
        </div>
        <div slot="footer-left">取消</div>
        <div @click="dofixSelfOrder" slot="footer-right">提交</div>
    </xlb-modal>

    <xlb-modal v-model="orderCancelLMod.mod">
        <div slot="header">提示</div>
        <div slot="content">
            <div>
               确定取消订单？
            </div>
        </div>
        <div slot="footer-left">取消</div>
        <div @click="doCancel" slot="footer-right">确定</div>
    </xlb-modal>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            orderId: '',
            orderCategory:'',
            //订单详情
            orderDetail: {
                orderEngineerVos: []
            },
            comment: {
                point: 2
            },
            dialogMod: {
                title: '',
                mod: false,
                content: ''
            },
            orderCancelLMod:{
                mod: false
            },
            canCelDesc: '',
            btnSubmitText: '',
            commonInfo: {
                point: '',
                note: '',
                show: false
            }
        },
        computed: {
            historyStatus: function () {
                var orderStatus = this.orderDetail.orderStatus;
                if (orderStatus) {
                    orderStatus = parseInt(orderStatus);
                    var statusArray = [5, 6, 7, 12];
                    if (statusArray.indexOf(orderStatus) >= 0) {
                        return true
                    }
                }
                return false;

            },
            btnSwitch: function () {
                var isJianKongPerson = this.orderCategory === 'createStatus'; // 监控人员类型
                var isNetWorkPerson = this.orderCategory === 'receiveStatus'; // 网点人员类型
                var orderStatus = this.orderDetail.orderStatus; // 订单状态

                if (isJianKongPerson) { // 监控人员
                    return 1;
                }
                // 网点人员
                // 等待处理 2 转给维护商 3
                return orderStatus === '13' ? 2 : 3;
            },
            showBtn: function () {
                var orderStatus = this.orderDetail.orderStatus; // 订单状态
                return ['7', '12', '15'].indexOf(orderStatus) < 0
            }


        },
        methods: {
            doCancel:function(){
                this.orderCancelLMod.mod = false;
                var canCelDesc = this.canCelDesc;
                Resource.post(ORDER_CANCEL_API, {orderId: vm.orderId}, function (res) {
                    // 订单列表
                    redirectMainPage('pages/order/list.html');
                })
            },
            // 取消订单
            cancelOrder: function () {
                this.orderCancelLMod.mod = true;
            },
            //获取订单详情
            getOrderDetail: function (orderId) {
                Resource.get(ORDER_DETAIL_API, {id: orderId}, function (res) {
                    vm.orderDetail = res;
                })

            },
            // 自行修复订单
            fixSelfOrder: function () {
                this.dialogMod.mod = true;
            },
            // 自行修复执行
            dofixSelfOrder: function () {
                var canCelDesc = this.canCelDesc;
                if (!canCelDesc) {
                    return mui.toast("请填写处理方式");
                }
                Resource.post(ORDER_SELF_FIX_API, {orderId: vm.orderId, orderDesc: canCelDesc}, function (res) {
                    // //订单列表
                    redirect('pages/order/list.html');
                })
            },
            // 开始检查
            checkOrder: function () {
                Resource.post(ORDER_INNER_CHECK_API, {id: vm.orderId}, function (res) {
                    // //订单列表
                    redirectMainPage('pages/order/list.html');
                })
            },
            // 跳转维护商
            goAddServerOrder: function () {
                console.log('pages/order/innner/add.html?code=' + this.orderDetail.atmCode + '&&orderId=' + this.orderId);
                redirect('pages/order/innner/add.html?code=' + this.orderDetail.atmCode + '&&orderId=' + this.orderId);
            }
        }
    });


    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        vm.imgServer = getImgServer();
        var orderId = self.orderId;
        vm.orderCategory = self.orderCategory;
        if (orderId == '' || orderId == 'undefined') {
            return;
        }
        console.log('listen ----------orderId =' + orderId);
        console.log('listen ----------orderCategory =' +vm.orderCategory);
        vm.orderId = orderId;
        vm.orderDetail = {
            orderEngineerVos: []
        };
        vm.getOrderDetail(orderId);
        console.log('------shuaxing--plusReady--')

    })
    //监听初始化
    document.addEventListener('changeTab', function (e) {
        var orderId = e.detail.params.orderId;
        console.log(JSON.stringify(e.detail));
        console.log("change params:"+ orderId);
        if (orderId ) {
            vm.orderId = orderId;
        }
        vm.orderCategory = e.detail.params.orderCategory;
        vm.getOrderDetail(vm.orderId);
        vm.canCelDesc = '';
        vm.dialogMod.mod = false;
        console.log('------shuaxing--changeTab--')
    })
    mui.init({
        beforeback: function () {
            refreshPage('pages/order/list.html');
            return true;
        }
    });

</script>
</body>
</html>